<template>
    <view class="gjl-view">
        <view class="main">
            <view class="card">
                <view class="top">
                    <view class="left">
                        <view class="num">
                            {{yongjinData.yongjin}}
                        </view>
                        <view class="text">
                            佣金分成（元）
                        </view>
                    </view>
                    <view class="right">
                        <view class="btn" @click="$routerTo({path:'/pagesMine/wallet/index'})">
                            去提现
                        </view>
                    </view>
                </view>
                <view class="bottom">
                    合伙人佣金统一迁移至我的钱包，请去钱包提现！
                </view>
            </view>
            <view class="main-center">
                <view class="title-box">
                    <view class="left">
                        <view class="blue-title">
                            佣金明细
                        </view>
                    </view>
                    <view class="right">
                        <view class="timer">
                            <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                                <view class="uni-input">{{date}}</view>
                            </picker>
                        </view>
                        <view class="down-arr"></view>
                    </view>
                </view>
                
                <view class="commission-box">
                    <view class="commission-ul">
                        <view class="commission-li" v-for="(item,index) in yongjinData.list" :key="index">
                            <view class="left">
                                <view class="name">
                                    用户购买分佣
                                </view>
                                <view class="type">
                                    {{item.fundsLogType | orderFilter}}
                                </view>
                            </view>
                            <view class="right">
                                <view class="num">
                                    ￥{{item.fundsLogMoney}}
                                </view>
                                <view class="time">
                                    {{item.fundsLogAddTime | format('yy-m-d')}}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import service from "@/service";
    import utils from '@/util/index.js';
    
    let titleFilter = {
        3: '佣金收入',
        6: '佣金提现',
        7: '佣金扣款',
        8: '佣金奖励'
    }
    export default {
        filters:{
            format(val,format){
                return utils.format(val,format)
            },
            orderFilter(val){
                val = val * 1
                return titleFilter[val]
            }
        },
        data() {
            const currentDate = this.getDate({
                format: true
            })
            return {
                date: currentDate,
                yongjinData: {},
                listQuery:{
                    page: 1,
                    limit: 10,
                    day: currentDate
                }
            }
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        mounted(){
            this.PartnershipYongjin()
        },
        onReachBottom(){
            this.PartnershipYongjin();
        },
        methods: {
            // 获取佣金数据
            PartnershipYongjin(){
                service.mineService.PartnershipYongjin({
                    data: {...this.listQuery},
                    success: res => {
                        let list = res.result.list;
                        if(this.listQuery.page == 1){
                            this.yongjinData = res.result;
                        }else{
                            this.yongjinData.list = this.yongjinData.list.concat(list);
                        }
                        if(list.length > 0){
                            this.listQuery.page++;
                        }
                    },
                    fail: ()=>{
                        
                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            bindDateChange: function(e) {
                this.date = e.target.value
                this.listQuery.day = e.target.value
                this.listQuery.page = 1;
                this.PartnershipYongjin();
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view {
        overflow: hidden;
        min-height: 100%;
        background: rgba(249, 249, 249, 1);

        .main {
            margin: 20rpx 30rpx 0;

            .main-center {
                margin-top: 20rpx;
                box-sizing: border-box;
                padding: 40rpx 20rpx 62rpx;
                background: rgba(255, 255, 255, 1);
                border-radius: 10rpx;

                .commission-box {
                    .commission-ul {
                        margin-top: 25rpx;
                        .commission-li+.commission-li {
                            margin-top: 14rpx;
                        }

                        .commission-li {
                            padding-bottom: 16rpx;
                            display: flex;
                            align-items: flex-start;
                            justify-content: space-between;
                            border-bottom: 1px solid rgba(229, 229, 229, 1);

                            .left {
                                .name {
                                    font-size: 28rpx;
                                    font-weight: 400;
                                    color: rgba(51, 51, 51, 1);
                                }

                                .type {
                                    margin-top: 5rpx;
                                    font-size: 24rpx;
                                    font-weight: 400;
                                    color: rgba(153, 153, 153, 1);
                                }
                            }

                            .right {
                                text-align: right;
                                .num {
                                    font-size: 28rpx;
                                    font-weight: bold;
                                    color: rgba(248, 36, 50, 1);
                                }

                                .time {
                                    font-size: 24rpx;
                                    font-weight: 400;
                                    color: rgba(153, 153, 153, 1);
                                }
                            }
                        }
                    }
                }

                .title-box {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .left {
                        .blue-title {
                            position: relative;
                            padding-left: 24rpx;
                            font-size: 32rpx;
                            font-weight: bold;
                            color: rgba(51, 51, 51, 1);
                        }
                    }

                    .right {
                        display: flex;
                        align-items: center;

                        .timer {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(43, 168, 252, 1);
                        }

                        .down-arr {
                            margin-left: 10rpx;
                            width: 0;
                            height: 0;
                            border-left: 10rpx solid transparent;
                            border-right: 10rpx solid transparent;
                            border-top: 18rpx solid #2BA8FC;
                        }
                    }
                }
            }

            .card {
                box-sizing: border-box;
                padding: 50rpx 60rpx;
                background: rgba(43, 168, 252, 1);
                border-radius: 10rpx;

                .top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .left {
                        .num {
                            font-size: 48rpx;
                            font-weight: bold;
                            color: rgba(255, 255, 255, 1);
                        }

                        .text {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);
                        }
                    }

                    .right {
                        .btn {
                            padding: 14rpx 58rpx;
                            background: rgba(255, 255, 255, 1);
                            border-radius: 50px;
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(43, 168, 252, 1);
                        }
                    }
                }

                .bottom {
                    margin-top: 40rpx;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: rgba(199, 233, 255, 1);
                }
            }
        }
    }
</style>
